<script setup lang='ts'>
import { useRoute } from "vue-router";
import {
    addPsychometricTitle, deletePsychometricTitle,
    getPsychometricTitle,
    getPsychometricTitleDetails,
    modifyPsychometricTitle
} from '@/api/interface/reuqest';
import { ref,reactive } from 'vue';
import {Refresh, Search} from "@element-plus/icons-vue";
import { ElMessage, FormInstance, UploadProps } from 'element-plus';
import { PsychometricTitle } from '@/api/interface/interfaceRequest';
import { getToken } from '@/utils/auth';
const route = useRoute();
let titleParams = ref<PsychometricTitle>({
    assessmentId:route.query.id,
    pageSize:10,
    pageNum:1,
    title:''
});
let titleList = ref([]);
// 总条数
let total = ref<number>();
function getList(){
    getPsychometricTitleDetails(titleParams.value).then((res)=>{
        console.log(res);
        if (res.code === 200) {
            titleList.value = res.rows;
            titleList.value.forEach((item)=>{
                item.status === '1'?item.status = '正常':item.status='禁用'
            })
            total.value = res.total;
        }
    });
}
getList();
//
//搜索表单内容
const formInline = reactive({
    title: '',
});
//展示数据声明
const tableData = ref([]);
function handleChange() {
    titleParams.value = {
        assessmentId:route.query.id,
        pageSize:10,
        pageNum:1,
        title:formInline.title,
    }
    getList();
}
//搜索框
function searchBox() {
    titleParams.value = {
        assessmentId:route.query.id,
        pageSize:10,
        pageNum:1,
        title:formInline.title,
    }
    getList();
}

//重置
const formRef = ref<FormInstance>()
const reset = (formEl: FormInstance | undefined) => {

    if (!formEl) return
    formEl.resetFields()
    titleParams.value = {
        assessmentId:route.query.id,
        pageSize:10,
        pageNum:1,
        title:'',
    }
    getList();
}
// 添加
//添加
const addVisible = ref(false);
const addForm = ref({
    assessmentId:route.query.id,
    title:'',
    sort:'',
    option:[
        {
            'optname': "A",
            'content': "",
            'score': ''
        },
        {
            'optname': "B",
            'content': "",
            'score': ''
        },
        {
            'optname': "C",
            'content': "",
            'score': ''
        },
        {
            'optname': "D",
            'content': "",
            'score': ''
        },
    ],
})
const addFormRef = ref<FormInstance>()
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            addPsychometricTitle(addForm.value).then((res)=>{
                if(res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "添加成功",
                    });
                    addVisible.value = false
                    getList();
                    formEl.resetFields();
                    addForm.value.option.forEach((item)=>{
                        item.content = '';
                        item.score ='';
                    })
                }
            })

            console.log(addForm.value);
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 编辑
const editVisible = ref(false);
const editForm = ref({
    id:'',
    content:'',
    option:[],
});

const editFormRef = ref<FormInstance>();
const editTitle = (data:any)=>{
    editVisible.value = true;
    getPsychometricTitle(data.id).then((res)=>{
        if (res.code === 200) {
            editForm.value = res.data;
            console.log(editForm.value);
        }

    })
}
const submitEditForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            const titleData =ref({
                id:editForm.value.id,
                title:editForm.value.title,
                option:editForm.value.option
            });
            modifyPsychometricTitle(titleData.value).then((res)=>{
                if(res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "修改成功",
                    });
                    editVisible.value = false;
                    getList();
                    formEl.resetFields()
                }

            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 删除
const delTitle =(data)=>{
    console.log(data.id);
    deletePsychometricTitle(data.id).then((res)=>{
        if(res.code === 200) {
            ElMessage({
                type: 'success',
                message: "删除成功",
            });
            getList()
        }
    })
}
// 分页
const handleCurrentChange = (val:any)=>{
    console.log(val);
}
// 导入
let importVisible = ref(false);
// 上传的请求头
let uploadHeaders = ref({ 'Authorization': getToken() });
//上传之前的函数
const beforeFileUpload: UploadProps['beforeUpload'] = (rawFile) => {
    // console.log(rawFile.type);
    if (rawFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        ElMessage.error('文件必须是xlsx格式！');
        return false;
    }
    return true;
};
// 上传成功的函数
const handleFileSuccess: UploadProps['onSuccess'] = (response) => {
    console.log(response);
    if (response.code === 200) {
        ElMessage.success('成功导入测评信息');
        importVisible.value = false;
    } else {
        ElMessage.info(response.msg);
    }
};
</script>

<template>
    <div class="box">
        <!--        头部-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
            <el-form-item label="题目名称" prop="title">
                <el-input @input="handleChange" v-model="formInline.title" placeholder="请输入题目" clearable/>
            </el-form-item>
            <el-form-item class="button">
                <el-button type="primary" :icon="Search" @click="searchBox">搜索</el-button>
                <el-button :icon="Refresh" @click="reset(formRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <!--        主体-->
        <div style="position: relative">
            <el-form-item>
                <el-button type='primary' @click="addVisible = true">
                    添加
                </el-button>
                <el-button type='primary' @click="importVisible = true">
                    导入
                </el-button>
            </el-form-item>
            <el-table :data="titleList" style="width: 100%;" border>
                <el-table-column type="index" label="序号" width='200px' align="center"/>
                <el-table-column prop="title" label="题目名称"  align="center"/>
                <el-table-column prop="status" label="状态"  align="center"/>
                <el-table-column prop="operation" label="操作"  align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editTitle(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="primary" size="small" @click="delTitle(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--            分页器-->
            <el-pagination v-if='titleList.length !== 0' background layout="prev, pager, next" class="page" :default-page-size=10
                           :total='total' :current-page.sync="titleParams.pageNum"
                           @current-change="handleCurrentChange"/>
        </div>
        <!--        添加模态框-->
        <el-dialog
            v-model="addVisible"
            title="添加"
            width="700"
        >

            <el-form :model="addForm" style="width:100%" ref="addFormRef">
                <div class='content-box'>
                    <div class='content-title' >
                        题目内容
                    </div>
                    <div class='content-text no-border'>
                        <el-form-item  prop="title" :rules="[{ required: true, message: '请输入内容！' }, { min: 1, message: '内容不能为空' }]">
                            <el-input
                                v-model="addForm.title"
                                style="width: 100%;"
                                maxlength="200"
                                autosize
                                placeholder="请输入题目内容"
                                type="textarea"
                                autocomplete="off"
                                resize='none'
                            />
                        </el-form-item>
                    </div>
                </div>
                <div class='content-box'>
                    <div class='content-title'>
                        选项内容
                    </div>
                    <div class='content-text'>
                        <ul>
                            <li >
                                <el-form
                                    :model='addForm.option[0]'
                                    :inline="true"
                                    style='width: 100%'
                                >

                                    <el-form-item  :label='addForm.option[0].optname' prop="content" style='width: 65%'>
                                        <el-input
                                            v-model="addForm.option[0].content"
                                            style="width: 100%;"
                                            maxlength="200"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            autocomplete="off"
                                            resize='none'
                                            :rows='2'
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label=""
                                        style='width: 25%'
                                        prop="score"
                                        :rules="[{ required: true, message: '请输入分数！' },
        {pattern:/^[0-9]{1,2}$/, message: '分数不能超过2位数' },
      ]"
                                    >
                                        <el-input
                                            v-model="addForm.option[0].score"
                                            style='width: 75%;height: 40px'
                                            type="text"
                                            placeholder="请填写分数"
                                            autocomplete="off"
                                        />
                                        <span class='clear-btn'>
                                           <el-icon><CloseBold /></el-icon>
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </li>
                            <li >
                                <el-form
                                    :model='addForm.option[1]'
                                    :inline="true"
                                    style='width: 100%'
                                >

                                    <el-form-item  :label='addForm.option[1].optname' prop="content" style='width: 65%'>
                                        <el-input
                                            v-model="addForm.option[1].content"
                                            style="width: 100%;"
                                            maxlength="200"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            autocomplete="off"
                                            resize='none'
                                            :rows='2'
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label=""
                                        style='width: 25%'
                                        prop="score"
                                        :rules="[{ required: true, message: '请输入分数！' },
        {pattern:/^[0-9]{1,2}$/, message: '分数不能超过2位数' },
      ]"
                                    >
                                        <el-input
                                            v-model="addForm.option[1].score"
                                            style='width: 75%;height: 40px'
                                            type="text"
                                            placeholder="请填写分数"
                                            autocomplete="off"
                                        />
                                        <span class='clear-btn'>
                                           <el-icon><CloseBold /></el-icon>
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </li>
                            <li >
                                <el-form
                                    :model='addForm.option[2]'
                                    :inline="true"
                                    style='width: 100%'
                                >

                                    <el-form-item  :label='addForm.option[2].optname' prop="content" style='width: 65%'>
                                        <el-input
                                            v-model="addForm.option[2].content"
                                            style="width: 100%;"
                                            maxlength="200"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            autocomplete="off"
                                            resize='none'
                                            :rows='2'
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label=""
                                        style='width: 25%'
                                        prop="score"
                                        :rules="[{ required: true, message: '请输入分数！' },
        {pattern:/^[0-9]{1,2}$/, message: '分数不能超过2位数' },
      ]"
                                    >
                                        <el-input
                                            v-model="addForm.option[2].score"
                                            style='width: 75%;height: 40px'
                                            type="text"
                                            placeholder="请填写分数"
                                            autocomplete="off"
                                        />
                                        <span class='clear-btn'>
                                           <el-icon><CloseBold /></el-icon>
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </li>
                            <li >
                                <el-form
                                    :model='addForm.option[3]'
                                    :inline="true"
                                    style='width: 100%'
                                >

                                    <el-form-item  :label='addForm.option[3].optname' prop="content" style='width: 65%'>
                                        <el-input
                                            v-model="addForm.option[3].content"
                                            style="width: 100%;"
                                            maxlength="200"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            autocomplete="off"
                                            resize='none'
                                            :rows='2'
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label=""
                                        style='width: 25%'
                                        prop="score"
                                        :rules="[{ required: true, message: '请输入分数！' },
        {pattern:/^[0-9]{1,2}$/, message: '分数不能超过2位数' },
      ]"
                                    >
                                        <el-input
                                            v-model="addForm.option[3].score"
                                            style='width: 75%;height: 40px'
                                            type="text"
                                            placeholder="请填写分数"
                                            autocomplete="off"
                                        />
                                        <span class='clear-btn'>
                                           <el-icon><CloseBold /></el-icon>
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </li>
                        </ul>

                    </div>

                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style='text-align: center'>
                    <el-button @click="addVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(addFormRef)">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
       <!--        编辑模态框-->
        <el-dialog
            v-model="editVisible"
            title="编辑"
            width="700"
        >
            <el-form :model="editForm" label-width="auto" style="width:100%" ref="editFormRef">
                <div class='content-box'>
                    <div class='content-title title-tip' >
                        题目内容
                    </div>
                    <div class='content-text no-border'>
                        <el-form-item  prop="title" :rules="[{ required: true, message: '请输入内容！' }, { min: 1, message: '内容不能为空' }]">
                            <el-input
                                v-model="editForm.title"
                                style="width: 100%;"
                                maxlength="200"
                                autosize
                                placeholder="请输入题目内容"
                                type="textarea"
                                autocomplete="off"
                                resize='none'
                            />
                        </el-form-item>
                    </div>
                </div>
                <div class='content-box'>
                    <div class='content-title'>
                        选项内容
                    </div>
                    <div class='content-text'>
                        <ul>
                            <li v-for='item in editForm.option' :key='item.id'>
                                <el-form
                                    :model="item"
                                    :inline="true"
                                    style='width: 100%'
                                >

                                    <el-form-item  :label='item.optname' prop="option" style='width: 65%'>
                                        <el-input
                                            v-model="item.content"
                                            style="width: 100%;"
                                            maxlength="200"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            autocomplete="off"
                                            resize='none'
                                            :rows='2'
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label=""
                                        style='width: 25%'
                                        prop="score"
                                        :rules="[{ required: true, message: '请输入分数！' },
        {pattern:/^[0-9]{1,2}$/, message: '分数不能超过2位数' },
      ]"
                                    >
                                        <el-input
                                            v-model="item.score"
                                            style='width: 75%;height: 40px'
                                            type="text"
                                            placeholder="请填写分数"
                                            autocomplete="off"
                                        />
                                        <span class='clear-btn'>
                                           <el-icon><CloseBold /></el-icon>
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </li>
                        </ul>

                    </div>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style='text-align: center'>
                    <el-button @click="editVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEditForm(editFormRef)">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--        导入模态框-->
        <el-dialog class='import-dialog'
                   v-model='importVisible'
                   title='测评信息导入'
                   width='402'
        >
            <el-upload
                class='upload-demo'
                name='file'
                drag
                action='/dev-api/evaluation/management/title/import'
                :headers='uploadHeaders'
                :show-file-list='false'
                :on-success='handleFileSuccess'
                :before-upload='beforeFileUpload'
            >
                <el-icon class='el-icon--upload'>
                    <upload-filled />
                </el-icon>
                <div class='el-upload__text'>
                    将文件拖到此处，或 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class='el-upload__tip'>
                        仅允许导入xlsx格式文件。
                    </div>
                </template>
            </el-upload>

            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='importVisible = false'>取消</el-button>
                    <el-button type='primary' @click='importVisible = false'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang='scss'>
.box {
    margin-bottom: 30px;
    padding: 30px;
}
.page {
    position: absolute;
    bottom: -50px;
    right: 10px;
}
.demo-form-inline {
    height: 50px;
}
::v-deep(.el-form-item__content) {
    margin-bottom: 18px;
}
::v-deep(.el-input__wrapper) {
    width: 200px;
}
.content-box {
    width: 100%;
    min-height: 85px;
    border: 1px solid #D0D0D0;
    margin-bottom: 15px;
    .content-title {
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
        font-weight: bold;
        background-color: #EDEDED;

    }
    .content-text {
        li {
            display: flex;
            padding: 0 15px;
            min-height: 50px;
            justify-content: space-between;
            margin-bottom: 10px;
            .clear-btn {
                margin-left: 15px;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: #B5B5B5;
                color:white;
                line-height: 25px;
                text-align: center;
                cursor: pointer;
            }
            ::v-deep(.el-form--inline .el-form-item:last-child) {
                margin-right: 0;
            }
            &:first-child {
                margin-top: 10px;
            }
            .left-box {
                width: 70%;
            }
            .right-box {
                width: 26%;
                span {

                }
            }
        }
    }
}
::v-deep(.el-dialog__header){
    position: relative;
    background-color: #1892FF;
    .el-dialog__headerbtn{
        height: 54px;
        position: absolute;
        top:0px;
        right: -16px;
        background-color: #1892FF;
        svg{
            color: white;
        }
    }
    span{
        color: #FFFFFF;
    }
}
::v-deep(.el-form-item) {
    margin-bottom: 0;
}
::v-deep(li .el-textarea__inner) {
    height:40px;
}
::v-deep(.no-border .el-textarea__inner) {
    box-shadow: 0 0 0 0px;
}
::v-deep(.no-border .el-textarea__inner:hover) {
    box-shadow: 0 0 0 0px;
}
::v-deep(.no-border .el-textarea__inner:focus) {
    box-shadow: 0 0 0 0px;
}
::v-deep(.no-border .el-form-item--default .el-form-item__error) {
    padding-left: 10px;
}

//导入模态框
.import-dialog {
    .dialog-footer {
        text-align: center;
    }
}

::v-deep(.el-upload__tip) {
    text-align: center;

    a {
        color: #00afff;
    }
}

::v-deep(.import-dialog .el-dialog__footer) {
    padding-top: 0;
}
</style>
